<template>
    <div class="iframe-box">
        <!-- <iframe :srcdoc="iframeContent" frameborder="0" style="overflow: hidden;"></iframe> -->
        <iframe :src="content.url" frameborder="0" style="overflow: hidden;"></iframe>
    </div>
</template>

<script>
export default {
    name: 'IframeBox',
    props: {
        content: Object
    },
    data () {
        return {
            iframeContent: '',
            url: this.content.url
        };
    },
    watch: {
        // 监听url可能是因为父页面最开始绑定的参数没有带url吧
        url (newUrl) {
            this.fetchIframeContent(newUrl);
        }
    },
    created(){
        console.log(this.content);
    },
    mounted () {
        this.fetchIframeContent(this.url);
    },
    methods: {
        fetchIframeContent (url) {
            this.$axios.get(url).then(res => {
                this.iframeContent = res.data;
            }).catch(() => {
                this.$message.error('查询部件失败');
            });
        }
    }
};
</script>

<style lang="scss" scoped>
iframe {
    width: 100%;
    height: 250px;
}
</style>
